<template>
	<view class="smart-column flex-center">
		<image class="logo" src="/static/logo.png" mode=""></image>
		<image :class="className" src="/static/logo.png" mode=""></image>
		<image class="smalllogo" :src="imgUrl" mode=""></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="flex-center smart-column">
			<view>{{number+1}}</view>
			<view>{{ok?"YES":"NO"}}</view>
			<view>{{message.split('').reverse().join('')}}</view>
		</view>
		<button :disabled="isButtonDisabled">Button</button>
		<view class="text-area">
			<text class="title" @click="open">{{title}}</text>
		</view>
		<view class="">
			<!-- 传递静态参数 -->
			<button @click="handleClick('参数1')">按钮1</button>
			<!-- 传递动态参数（来自data） -->
			<button @click="handleClick(dynamicParam)">按钮2</button>
			<!-- 传递多个参数+事件对象 -->
			<button @click="handleClick('参数A','参数B',$event)">按钮3</button>
			<!-- 同时获取参数和事件对象 -->
			<button @click="(e)=>handleButton('点击事件',e)">带事件对象</button>
		</view>
		<view class="model">
			<input v-model="modelMessage" placeholder="edit me"/>
			<text>Message is:{{modelMessage}}</text>
		</view>
		<view>
			<view v-if="!raining">今天天气真好！</view>
			<view v-if="raining">下雨天，只能在家呆着！</view>
			<view v-if="state==='vue'">state的值是vue</view>
			<view> State is {{state?"vue":"APP"}}</view>
		</view>
		<view>
			<view v-if="state==='vue'">uniapp</view>
			<view v-else-if="state==='html'">HTML</view>
			<view v-else>APP</view>
		</view>
		<view>
			<view v-for="(item,index) in arr" :key="index" style="color: red;">
				{{item}}
			</view>
			<view v-for="(item,index) in 4"  style="color: slateblue;">
				<view :class="'list-'+index%2">
					{{index%2}}
				</view>
			</view>
			<view v-for="(value,name,index) in object"  style="color: darkgreen;">
				{{index}}.{{name}}:{{value}}
			</view>
			<view v-for="(item,index) in arr" :key="item.id">
				<view style="color: coral;">
					{{item.id}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"你好！欢迎来到uniapp语法页",
				number:1,
				ok:true,
				message:"HELLO!你好",
				className:"smalllogo",
				imgUrl:"/static/grammer.png",
				isButtonDisabled:true,
				dynamicParam:"我是动态事件",
				modelMessage:"",
				raining:false,
				state:"vue",
				arr:[
					{id:123,name:"uniapp"},
					{id:456,name:"HTML"}
				],
				object:{
					title:"Hello welcome to uniapp",
					author:"shimuheng",
					time:"2025-10-14"
				}
			}
		},
		methods: {
			open(){
				this.title="hello! Welcome to uniapp GrammerPage"
			},
			handleClick(params1,params2,event){
				console.log("参数1",params1)
				console.log("参数2",params2)
				console.log("事件对象",event)
			},
			handleButton(msg,event){
				console.log("接收到的消息",msg)
				console.log("事件对象",event)
				console.log("按钮的文本",event.currentTarget.dataset.text)
			}
		}
	}
</script>

<style>
	.logo{
		width: 180px;
		height: 180px;
		padding: 15px;
	}
	.smalllogo{
		width: 10px;
		height: 10px;
	}
	.model{
		background-color: aquamarine;
	}
</style>
